<template>
  <div id="app">
    <ul class="methods-wrap">
      <li class="item" v-for="(item, index) in methodsList" :key="index">
        <p class="methods-name">
          {{(index + 1) + '、' + item.name}}
        </p>
        <p class="methods-des">
          {{item.des}}
        </p>
        <p class="methods-example">
          {{'示例：window.activity.' + item.name + '()'}}
        </p>
        <div class="input-box" v-show="item.input">
          <input type="text" v-model="item.val">
        </div>
        <div class="btn-wrap">
          <button class="btn" @click="handleClick(item.name, item.val)">确定</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "nativeMethods",
  data() {
    return {
      methodsList: [],
      desList: {
        setTitleTextColor: "设置导航栏标题颜色",
        setTitleText: "设置导航栏标题",
        setTitleBarBg: "设置导航栏背景颜色",
        registerPageControlBack: "注册导航栏返回事件"
      }
    };
  },
  methods: {
    initNative() {
      let obj = window.T.native;
      Object.keys(obj).forEach(key => {
        let obj1 = {};
        if (key.indexOf("set") > -1) {
          obj1.name = key;
          obj1.des = this.desList[key] || "";
          obj1.input = true;
          obj1.val = "";
        } else {
          obj1.name = key;
          obj1.des = this.desList[key] || "";
          obj1.input = false;
          obj1.val = "";
        }
        this.methodsList.push(obj1);
      });
    },
    jumpBack() {
      alert("原生调用返回事件");
    },
    handleClick(method, val) {
      if (method === "registerPageControlBack") {
        window.T.native[method](1, this.jumpBack);
      }
      if (method.indexOf("setTitle") > -1) {
        window.T.native[method](val);
      }
    }
  },
  created() {
    this.initNative();
  }
};
</script>


<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.methods-wrap {
}
.item {
  padding: 0 10px 0 30px;
}
.methods-name {
  margin-left: -20px;
}
</style>
